<template>
  <div class="hotboom">
    <div class="header-nav">
      <div
        class="nav-item"
        :class="type === '1' ? 'active' : ''"
        @click="onTabClick('1')"
      >
        寄件
      </div>
      <div
        class="nav-item"
        :class="type === '2' ? 'active' : ''"
        @click="onTabClick('2')"
      >
        取件
      </div>
    </div>
    <header>
      <template v-if="type === '2'">
        <div class="copy-title">粘贴取件码</div>
        <uni-easyinput type="textarea" v-model="value" :inputBorder="false">
        </uni-easyinput>
      </template>
      <template v-if="type === '1'">
        <div class="title">寄件信息</div>
        <div class="goods-item" style="margin: 20rpx 0">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/shou.jpg"
            mode="scaleToFill"
          />
          <uni-easyinput
            v-model="value"
            placeholder="收件信息"
            :inputBorder="false"
          ></uni-easyinput>
        </div>
        <div class="goods-item" style="margin: 20rpx 0">
          <image
            style="width: 80rpx; height: 80rpx"
            src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/ji.jpg"
            mode="scaleToFill"
          />
          <uni-easyinput
            v-model="value"
            placeholder="寄件信息"
            :inputBorder="false"
          ></uni-easyinput>
        </div>
      </template>
      <div class="tips">
        <div class="left" @click="toChatDetail">骑手距离 1.5KM</div>
        <image
          @click="toRiderList"
          src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/chat.jpg"
          mode="scaleToFill"
        />
      </div>
      <div class="desc">
        <div class="left">
          <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/desc.jpg" mode="scaleToFill" />
          <text>骑手垫付商品费，收货后与配送员结清</text>
        </div>
        <div class="right">预估商品费 ></div>
      </div>
    </header>
    <div class="goods">
      <template v-if="type === '1'">
        <div class="goods-item">
          <div class="left">
            <image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/qu.jpg" mode="scaleToFill" />
            <span>拿件位置</span>
            <uni-easyinput
              v-model="value"
              placeholder="在哪里拿件"
              :inputBorder="false"
            ></uni-easyinput>
          </div>
          <image
            src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/location.jpg"
            mode="scaleToFill"
          />
        </div>
      </template>

      <template v-if="type === '2'">
        <div class="goods-item">
          <div class="left">
            <image
              src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/song.jpg"
              mode="scaleToFill"
            />
            <uni-easyinput
              v-model="value"
              placeholder="送到哪里去"
              :inputBorder="false"
            ></uni-easyinput>
          </div>

          <image
            src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/peopel.jpg"
            mode="scaleToFill"
          />
        </div>
      </template>
      <div class="goods-time">
        <span>取件时间</span>
        <div class="time">03-22 立即取件(约17:26) ></div>
      </div>
    </div>
    <div class="info">
      <span>物品信息</span>
      <div class="weight">5公斤 ></div>
    </div>
    <div class="mark">
      <span>备注</span>
      <uni-easyinput
        v-model="value"
        placeholder="请输入提示信息"
        :inputBorder="false"
      ></uni-easyinput>
    </div>
    <div class="other">
      <div class="other-item">
        <span>红包</span>
        <div class="red">暂无可用红包 ></div>
      </div>
      <div class="other-item">
        <span>小费</span>
        <div class="red">加小费抢单更快哦 ></div>
      </div>
    </div>
    <div class="msg">
      <radio :value="r1" :checked="false" />
      <p>已阅读并同意<span>《跑腿服务协议》</span></p>
    </div>
    <footer>
      <div class="left">跑腿费<span>￥6</span></div>
      <div class="right">
        <span>明细 ^</span>
        <button>提交订单</button>
      </div>
    </footer>
  </div>
</template>

<script>
var app = getApp()
export default {
  components: {},
  data() {
    return {
		value:'',
      r1: '',
      type: '1'
    }
  },
  computed: {},
  methods: {
    onTabClick(index) {
      this.type = index
    },
    onBack() {
      uni.navigateBack({ delta: 1 })
    },

    toRiderList() {
      uni.navigateTo({
        url: '/ymq_canyino2o/pages/rider/index'
      })
    },
    toChatDetail() {
      uni.navigateTo({
        url: '/ymq_canyino2o/pages/chat/chatDetail/index'
      })
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.type = options.type
    app.globalData.setNavigationBarColor(this);
    this.appPageOnLoad(app);
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped>
.hotboom {
  min-height: 100vh;
  background: #eee;
}
.header-nav {
  width: 95%;
  margin: 20rpx auto 0;
  height: 100rpx;
  display: flex;
  align-items: center;
}
.header-nav .btn {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}
.header-nav .nav-item {
  width: 50%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
}
.header-nav .nav-item.active {
  background: #f7f5f5;
}
.header-nav .btn button {
  width: 150rpx;
  margin-right: 20rpx;
}
header,
.goods,
.info,
.mark,
.other {
  width: 95%;
  background: #fff;
  padding: 20rpx 40rpx;
  margin: 0 auto 20rpx;
  border-radius: 20rpx;
}
header {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
header .title {
  font-weight: 600;
}
header .copy-title {
  font-weight: 600;
  border: 1px solid red;
  border-radius: 20rpx;
  padding: 4rpx 10rpx;
  width: 180rpx;
  text-align: center;
}
header .tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}
header .tips .left {
  font-weight: 600;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border: 1px solid red;
  border-radius: 20rpx;
  background: rgb(255, 227, 227);
}
header .tips image {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}
header .desc {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #706e6e;
}
header .desc .left {
  display: flex;
  align-items: center;
}
header .desc image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
  border-radius: 10rpx;
}
.goods image {
  width: 50rpx;
  height: 50rpx;
}
.goods-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #eee;
}
.goods .goods-item .left {
  display: flex;
  align-items: center;
}
.goods .goods-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info,
.mark,
.other .other-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info span,
.mark span,
.other span {
  font-weight: 600;
  font-size: 24rpx;
}
.other .other-item {
  padding: 20rpx 0;
}
.other .other-item:first-child {
  border-bottom: 1px solid #eee;
}
.msg {
  width: 95%;
  display: flex;
  align-items: center;
  margin: 10rpx auto;
  margin-bottom: 120rpx;
}
.msg p span {
  color: rgb(255, 196, 87);
}
footer {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  padding: 0 0 0 2.5%;
  background: #fff;
}
footer .left span {
  color: red;
  font-size: 30rpx;
  font-weight: 600;
}
footer .right {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .right button {
  height: 100rpx;
  width: 70%;
  border: none;
  outline: none;
  border-radius: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(242, 212, 157);
  color: #817e7e;
  margin-right: 0;
}
</style>
